import React,{Component} from 'react';


import {observer,inject} from "mobx-react";
import {computed,toJS} from "mobx";

import {
  Tabs,
  Input,
  Button,
  Popover,
  Tree,
  Cascader,
  Checkbox,
  Tooltip,
  Collapse,
  Modal,
} from "antd";

import{
  QuestionOutlined,
  CloseOutlined,
  SettingOutlined
} from '@ant-design/icons';

import {View} from "../component/index";

const { TabPane } = Tabs;
const {TreeNode} = Tree;
const { Panel } = Collapse;
const { TextArea } = Input;

@inject(["store"])
@observer
class Configura extends Component{

  constructor(props){
    super(props);
    this.state={
      // 用于显示大图
      visible:false,
      image:"",
    };
    this.store = this.props.store;
    this.conf = this.store.storeConfigura;
    if(!this.treeData.length){
      this.conf.init();
    }
  }
  
  componentDidMount(){
    if(this.cont){
      this.conf.set("contHeight",this.cont.offsetHeight);
    }
    this.store.navigation({page:"Configura"});
  }

  @computed get height(){return this.store.height;}
  @computed get website(){return this.store.website;}
  @computed get addr(){return toJS(this.store.addr);}


  @computed get loading(){return this.conf.loading;}
  @computed get postage(){return this.conf.postage;}
  @computed get companyVisible(){return this.conf.companyVisible;}

  @computed get contHeight(){return this.conf.contHeight;}
  @computed get setting(){return toJS(this.conf.setting);}

  
  // 分类树形数据
  @computed get treeData() {return this.conf.treeData.slice();}
  // 选择上级分类
  @computed get options(){return this.conf.options.slice();}
  // 树形所选节点
  @computed get selectedKeys(){return this.conf.selectedKeys.slice();}


  // 快递费用信息框
  _modal(){
    return(
      <Modal
        title="输入快递公司名称"
        visible={this.companyVisible}
        onOk={()=>{
          const tempPostage=this.setting.postage;
          const obj = {
              title:this.postage.company,//快递名称
              first:this.postage.first,//首重
              continued:this.postage.continued,//续重
              price:{}//pxxx:{first:首重价格,continue:续重价格}
            };
          
          this.addr.map(province=>{
            if(province.children){
              province.children.map(city=>{
                obj.price[`p${city.value}`]={first:1,continue:1};
              });
            }else{
              obj.price[`p${province.value}`]={first:1,continue:1};
            }
          });
          tempPostage.push(obj);
          this.conf.set("setting-postage",tempPostage);
          this.conf.set("postage",{
            company:"",
            first:"",
            continued:"",
          });
          this.conf.set("companyVisible",false);
        }}
        onCancel={()=>{
          this.conf.set("postage",{
            company:"",
            first:"",
            continued:"",
          });
          this.conf.set("companyVisible",false);
        }}
        >
        <Input
          style={{margin:"0 10px 10px 0"}}
          addonBefore="名称"
          disabled={this.loading.sys}
          value={this.postage.company}
          placeholder="快递公司名称"
          onChange={e=>this.conf.set("postage-company",e.target.value)}
        />
        <Input
          style={{margin:"0 10px 10px 0"}}
          addonBefore="首重"
          addonAfter="g"
          placeholder="首重重量，以克为单位"
          disabled={this.loading.sys}
          value={this.postage.first}
          onChange={e=>this.conf.set(`postage-first`,e.target.value)}
        />
        <Input
          style={{margin:"0 10px 10px 0"}}
          addonBefore="续重"
          addonAfter="g"
          placeholder="续重重量，以克为单位"
          disabled={this.loading.sys}
          value={this.postage.continued}
          onChange={e=>this.conf.set(`postage-continued`,e.target.value)}
        />
      </Modal>
    );
  }

  _onEdit(targetKey, action){
    this[`_${action}`](targetKey);
  }
  // 增加一个快递信息
  _add(){
    this.conf.set("company","");
    this.conf.set("companyVisible",true);
  }
  // 删除一个快递信息
  _remove(targetKey){
    let tempPostage=[];
    this.setting.postage.map((item,index)=>{
      if(Number(targetKey) !== index){
        tempPostage.push(item);
      }
    });
    this.conf.set("setting-postage",tempPostage);
  }
  
  render(){
    const appStyle={marginTop:5,marginRight:5,flexDirection:"row",justifyContent:"center",alignItems:"center"};
    const appStyleSpan={width:150,textAlign:"right"};
    const styleB={width:150,paddingLeft:10};
    const {postage} = this.setting;
    // 支付宝小程序参数
    const zfbConfigura=(
      <View style={{height:"100%",flexDirection:"column",justifyContent:"space-between"}}>
        <View style={{flex:1,flexDirection:"column",justifyContent:"center"}}>
          <View style={{flexDirection:"column",overflowY:"auto",height:this.height-160}}>
            <View style={appStyle}>
              <span style={appStyleSpan}>APP名称：</span>
              <View style={{flex:1,flexDirection:"row",alignItems:"center"}}>
                <Input disabled={this.loading.app} value={this.setting.app.name} onChange={e=>this.conf.set("setting-app-name",e.target.value)} />
              </View>
              <b style={styleB}>[name]</b>
            </View>
            
          </View>
        </View>
        <Button
          style={{marginTop:20,borderRadius:0}}
          loading={this.loading.app}
          disabled={this.loading.app}
          onClick={()=>this.conf.submit_configura("app")}
          danger type="primary"
          >
            保存
        </Button>
      </View>
    );
    // 系统配置
    const sysConfigura=(
      <View style={{height:"100%",flexDirection:"column",justifyContent:"space-between"}}>
        <View style={{flex:1,flexDirection:"column",justifyContent:"center"}}>
          <div style={{overflowY:"auto",height:this.height-160}}>
            <View style={appStyle}>
              <span style={appStyleSpan}>站点名称：</span>
              <View style={{flex:1,flexDirection:"row",alignItems:"center"}}>
                <Input
                  disabled={this.loading.sys}
                  value={this.setting.sys && this.setting.sys.name?this.setting.sys.name:""}
                  onChange={e=>this.conf.set("setting-sys-name",e.target.value)}
                />
              </View>
              <b style={styleB}>[name]</b>
            </View>
            <View style={appStyle}>
              <span style={appStyleSpan}>版权信息：</span>
              <View style={{flex:1,flexDirection:"row",alignItems:"center"}}>
                <Input
                  disabled={this.loading.sys}
                  value={this.setting.sys && this.setting.sys.copyright?this.setting.sys.copyright:""}
                  onChange={e=>this.conf.set("setting-sys-copyright",e.target.value)}
                />
              </View>
              <b style={styleB}>[copyright]</b>
            </View>
            <View style={appStyle}>
              <span style={appStyleSpan}>链接分类：</span>
              <View style={{flex:1,flexDirection:"row",alignItems:"center"}}>
                <Cascader
                  options={this.options}
                  loadData={this.conf.onLoadOption}
                  onChange={(value,selectedOptions)=>{
                    const len = value.length-1;
                    this.conf.set("setting-sys-linkid",value[len]);
                  }}
                  changeOnSelect
                >
                  <Input value={this.setting.sys.linkid} />
                </Cascader>
              </View>
              <b style={styleB}>[linkid]</b>
            </View>
            <View style={appStyle}>
              <span style={appStyleSpan}>商品分类：</span>
              <View style={{flex:1,flexDirection:"row",alignItems:"center"}}>
                <Cascader
                  options={this.options}
                  loadData={this.conf.onLoadOption}
                  onChange={(value,selectedOptions)=>{
                    const len = value.length-1;
                    this.conf.set("setting-sys-productid",value[len]);
                  }}
                  changeOnSelect
                >
                  <Input value={this.setting.sys.productid} />
                </Cascader>
              </View>
              <b style={styleB}>[productid]</b>
            </View>
            <View style={appStyle}>
              <span style={appStyleSpan}>分页条数：</span>
              <View style={{flex:1,flexDirection:"row",alignItems:"center"}}>
                <Input
                  disabled={this.loading.sys}
                  value={this.setting.sys && this.setting.sys.pagingnum?this.setting.sys.pagingnum:""}
                  onChange={e=>this.conf.set("setting-sys-pagingnum",e.target.value)}
                />
              </View>
              <b style={styleB}>[pagingnum]</b>
            </View>
            <View style={appStyle}>
              <span style={appStyleSpan}>上传文件大小：</span>
              <View style={{flex:1,flexDirection:"row",alignItems:"center"}}>
                <Input
                  disabled={this.loading.sys}
                  value={this.setting.sys && this.setting.sys.filesize?this.setting.sys.filesize:""}
                  onChange={e=>this.conf.set("setting-sys-filesize",e.target.value)}
                  addonAfter="MB"
                />
              </View>
              <b style={styleB}>[filesize]</b>
            </View>
            <View style={appStyle}>
              <span style={appStyleSpan}>上传图片类型：</span>
              <View style={{flex:1,flexDirection:"row",alignItems:"center"}}>
                <Input
                  placeholder="用,间隔(jpg,png,gif)"
                  disabled={this.loading.sys}
                  value={this.setting.sys && this.setting.sys.filetype?this.setting.sys.filetype:""}
                  onChange={e=>this.conf.set("setting-sys-filetype",e.target.value)}
                />
              </View>
              <b style={styleB}>[filetype]</b>
            </View>
            <View style={appStyle}>
              <span style={appStyleSpan}>自营店ID：</span>
              <View style={{flex:1,flexDirection:"row",alignItems:"center"}}>
                <Input
                  placeholder="多个id用,隔空"
                  disabled={this.loading.sys}
                  value={this.setting.sys && this.setting.sys.selfid?this.setting.sys.selfid:""}
                  onChange={e=>this.conf.set("setting-sys-selfid",e.target.value)}
                />
              </View>
              <b style={styleB}>[selfid]</b>
            </View>
            <View style={appStyle}>
              <span style={appStyleSpan}>送货地址上限：</span>
              <View style={{flex:1,flexDirection:"row",alignItems:"center"}}>
                <Input
                  placeholder="地址上限个数"
                  disabled={this.loading.sys}
                  value={this.setting.sys && this.setting.sys.addrmaxnum?this.setting.sys.addrmaxnum:""}
                  onChange={e=>this.conf.set("setting-sys-addrmaxnum",e.target.value)}
                />
              </View>
              <b style={styleB}>[addrmaxnum]</b>
            </View>
            <View style={appStyle}>
              <span style={appStyleSpan}>商品收藏上限：</span>
              <View style={{flex:1,flexDirection:"row",alignItems:"center"}}>
                <Input
                  placeholder="商品收藏上限个数"
                  disabled={this.loading.sys}
                  value={this.setting.sys && this.setting.sys.productcollect?this.setting.sys.productcollect:""}
                  onChange={e=>this.conf.set("setting-sys-productcollect",e.target.value)}
                />
              </View>
              <b style={styleB}>[productcollect]</b>
            </View>
            <View style={appStyle}>
              <span style={appStyleSpan}>商品浏览记录：</span>
              <View style={{flex:1,flexDirection:"row",alignItems:"center"}}>
                <Input
                  placeholder="商品浏览记录条数上限："
                  disabled={this.loading.sys}
                  value={this.setting.sys && this.setting.sys.producthistory?this.setting.sys.producthistory:""}
                  onChange={e=>this.conf.set("setting-sys-producthistory",e.target.value)}
                />
              </View>
              <b style={styleB}>[producthistory]</b>
            </View>
            <View style={appStyle}>
              <span style={appStyleSpan}>支付宝appid：</span>
              <View style={{flex:1,flexDirection:"row",alignItems:"center"}}>
                <Input disabled={this.loading.sys} value={this.setting.sys.payAppidZfb} onChange={e=>this.conf.set("setting-sys-payAppidZfb",e.target.value)} />
              </View>
              <b style={styleB}>[payAppidZfb]</b>
            </View>
            <View style={appStyle}>
              <span style={appStyleSpan}>支付宝异步回调地址：</span>
              <View style={{flex:1,flexDirection:"row",alignItems:"center"}}>
                <Input disabled={this.loading.sys} value={this.setting.sys.payZfbNotifyUrl} onChange={e=>this.conf.set("setting-sys-payZfbNotifyUrl",e.target.value)} />
              </View>
              <b style={styleB}>[payZfbNotifyUrl]</b>
            </View>
          </div>
        </View>
        <Button
          style={{marginTop:20,borderRadius:0}}
          loading={this.loading.sys}
          disabled={this.loading.sys}
          onClick={()=>this.conf.submit_configura("sys")}
          danger type="primary"
          >
            保存
        </Button>
      </View>
    );
    // 邮费配置
    const postageConfigura=(
      <View style={{height:"100%",flexDirection:"column",padding:"0 10px",justifyContent:"space-between"}}>
        <Tabs
          // onChange={this.onChange}
          type="editable-card"
          onEdit={(targetKey, action)=>this._onEdit(targetKey, action)}
          style={{height:this.height-160}}
          >
          {
            postage.map((item,index)=>(
              <TabPane
                tab={item.title}
                key={index}
                closable
                >
                <View style={{flexDirection:"column",padding:"0 10px"}}>
                  <View style={{height:50}}>
                    <Input
                      style={{marginRight:5}}
                      addonBefore="首重"
                      addonAfter="g"
                      placeholder="首重重量，以克为单位"
                      disabled={this.loading.sys}
                      value={item.first}
                      onChange={e=>this.conf.set(`setting-postage-${index}-first`,e.target.value)}
                    />
                    <Input
                      style={{marginRight:5}}
                      addonBefore="续重"
                      addonAfter="g"
                      placeholder="续重重量，以克为单位"
                      disabled={this.loading.sys}
                      value={item.continued}
                      onChange={e=>this.conf.set(`setting-postage-${index}-continued`,e.target.value)}
                    />
                  </View>
                  <Tabs tabPosition="left" style={{height:this.height-270}} onChange={activeKey=>this.conf.set("activeKey",activeKey)}>
                  {
                    this.addr.length?
                    this.addr.map(province=>
                      <TabPane
                        tab={province.label}
                        key={province.value}
                        >
                        <View style={{paddingRight:10,flexDirection:"column",height:this.height-270,overflowY:"scroll"}}>
                          <View style={{alignItems:"center"}}>
                            <div style={{textAlign:"right",width:120}}></div>
                            <View style={{flex:1}}>
                              <Input
                                style={{marginLeft:10}}
                                addonBefore="统一首重"
                                disabled={this.loading.sys}
                                placeholder="统一首重价格(输入即可设置下列值为一致)"
                                onChange={e=>{
                                  if(province.children){
                                    province.children.map(city=>{
                                      this.conf.set(
                                        `setting-postage-${index}-price-p${city.value}-first`,
                                        e.target.value
                                      );
                                    }); 
                                  }else{
                                    this.conf.set(
                                      `setting-postage-${index}-price-p${province.value}-first`,
                                      e.target.value
                                    );
                                  }
                                  
                                }}
                              />
                              <Input
                                style={{marginLeft:10}}
                                addonBefore="统一续重"
                                disabled={this.loading.sys}
                                placeholder="统一续重价格(输入即可设置下列值为一致)"
                                onChange={e=>{
                                  if(province.children){
                                    province.children.map(city=>{
                                      this.conf.set(
                                        `setting-postage-${index}-price-p${city.value}-continue`,
                                        e.target.value
                                      );
                                    }); 
                                  }else{
                                    this.conf.set(
                                      `setting-postage-${index}-price-p${province.value}-continue`,
                                      e.target.value
                                    );
                                  }
                                }}
                              />
                            </View>
                          </View>
                          {
                            province.children?
                            province.children.map(city=>
                              <View key={city.value} style={{marginTop:10,alignItems:"center"}}>
                                <div style={{textAlign:"right",width:120}}>{city.label}</div>
                                <View style={{flex:1}}>
                                  <Input
                                    style={{marginLeft:10}}
                                    addonBefore="首重价格"
                                    addonAfter="￥"
                                    disabled={this.loading.sys}
                                    value={
                                      postage[index].price[`p${city.value}`]&&
                                      postage[index].price[`p${city.value}`].first?
                                      `${postage[index].price[`p${city.value}`].first}`:
                                      ""
                                    }
                                    placeholder="首重价格"
                                    onChange={e=>{
                                      this.conf.set(
                                        `setting-postage-${index}-price-p${city.value}-first`,
                                        e.target.value
                                      );
                                    }}
                                  />
                                  <Input
                                    style={{marginLeft:10}}
                                    key={city.value}
                                    addonBefore="续重价格"
                                    addonAfter="￥"
                                    disabled={this.loading.sys}
                                    value={
                                      postage[index].price[`p${city.value}`]&&
                                      postage[index].price[`p${city.value}`].continue?
                                      `${postage[index].price[`p${city.value}`].continue}`:
                                      ""
                                    }
                                    placeholder="续重价格"
                                    onChange={e=>{
                                      this.conf.set(
                                        `setting-postage-${index}-price-p${city.value}-continue`,
                                        e.target.value
                                      );
                                    }}
                                  />
                                </View>
                              </View>
                            ):
                            <View key={`${province.value}1`} style={{marginTop:10,alignItems:"center"}}>
                              <div style={{textAlign:"right",width:120}}>{province.label}</div>
                              <View style={{flex:1}}>
                                <Input
                                  style={{marginLeft:10}}
                                  addonBefore="首重价格"
                                  addonAfter="￥"
                                  disabled={this.loading.sys}
                                  value={
                                    postage[index].price[`p${province.value}`]&&
                                    postage[index].price[`p${province.value}`].first?
                                    `${postage[index].price[`p${province.value}`].first}`:
                                    ""
                                  }
                                  placeholder="首重价格"
                                  onChange={e=>this.conf.set(`setting-postage-${index}-price-p${province.value}-first`,e.target.value)}
                                />
                                <Input
                                  style={{marginLeft:10}}
                                  key={province.value}
                                  addonBefore="续重价格"
                                  addonAfter="￥"
                                  disabled={this.loading.sys}
                                  value={
                                    postage[index].price[`p${province.value}`]&&
                                    postage[index].price[`p${province.value}`].continue?
                                    `${postage[index].price[`p${province.value}`].continue}`:
                                    ""
                                  }
                                  placeholder="续重价格"
                                  onChange={e=>this.conf.set(`setting-postage-${index}-price-p${province.value}-continue`,e.target.value)}
                                />
                              </View>
                            </View>
                          }
                        </View>
                      </TabPane>
                    ):
                    null
                  }
                  </Tabs>
                </View>
              </TabPane>
            ))
          }
        </Tabs>
        <Button
          style={{marginTop:20,borderRadius:0}}
          loading={this.loading.postage}
          disabled={this.loading.postage}
          onClick={()=>this.conf.submit_configura("postage")}
          danger type="primary"
          >
            保存
        </Button>
      </View>
    );

    return(
      <View style={{flex:1,width:"100%"}}>
        <Tabs onChange={key=>this.conf.changeTab(key)} defaultActiveKey="sys" style={{width:"100%",height:this.height-42}}>
          <TabPane tab="系统设置" key="sys">
            {sysConfigura}
          </TabPane>
        </Tabs>
        {this._modal()}
      </View>
    );
  }
}

export default Configura;